<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>放映计划列表</title>

    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="css/manage.css">

    <style>
        /*设置表格表头字体样式*/
        .layui-table th {
            /*表头内容居中显示*/
            text-align: center;
            /*字体加粗*/
            font-weight: bold;
        }

        /*设置表格宽度*/
        .layui-table {
            width: 98%;
        }

        /*设置鼠标经过图标变色*/
        .layui-icon:hover {
            color: red;
        }

        /* 设置页面右上角切换分页显示按钮的样式 */
        .qiehuan {
            display: inline-block;
            position: absolute;
            right: 25px;
        }
        .bb {
			display: inline-block;
			height: 35px;
			line-height: 1.2;
			width: 30px;
			text-align: center;
			padding: 0 10px 0 10px;
			border: 1px solid #ccc;
			font-size: 14px;
			background-color: #faf8fa;
			color: #333;
			overflow: hidden;
		}

        .c {
            width: 600px;
        }

        /*搜索框*/
		.search {
			display: inline-block;
			height: 40px;
			line-height: 1.2;
			width: 220px;
			padding: 0 40px 0 20px;
			border: 1px solid #ccc;
			font-size: 14px;
			border-radius: 30px;
			background-color: #faf8fa;
			overflow: hidden;
			color: #333;
            margin-left: 10px;

		}

		/*搜索按钮*/
		.sub {
			display: inline-block;
			position: absolute;
			left: 398px;
			top: 21px;
			height: 40px;
			width: 40px;
			background-color: #cccccc;
			border-radius: 30px;
			background-image: url('images/query.png');
			cursor: pointer;
			border: none;
		}

		.sub:hover {
			background-color: #FFB800;
		}
        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }

        /* layui 时间选择器 不要秒(只显示时分)的选项 */
        .layui-laydate-content>.layui-laydate-list {
            padding-bottom: 0px;
            overflow: hidden;
        }

        .layui-laydate-content>.layui-laydate-list>li {
            width: 50%
        }

        .merge-box .scrollbox .merge-list {
            padding-bottom: 5px;
        }
    </style>
</head>

<body>
    <div id="show-list" v-cloak>
        <div style="margin-top:20px;">
            <a><button type="button" class="layui-btn layui-btn-warm" id="addShow"><i
                        class="layui-icon">&#xe654;</i>添加上映计划</button></a>

            <div style="display:inline-block;">
                <form>
                    <input type="text" id="cond" value="" required placeholder="寻找放映计划" class="search">
                    <input class="sub" type="button" value="" @click="selectByLike">

                </form>
            </div>
                        
            <div class="qiehuan" @click="checkPager">
                <button class="layui-btn layui-btn-warm" id="check">分页显示</button>
            </div>
            
        </div><br />



        <table class="layui-table">

            <thead>
                <tr>
                    <th>ID</th>
                    <th>放映影片</th>
                    <!-- <th>海报</th> -->
                    <th>放映影厅</th>
                    <th>放映日期</th>
                    <th>开场时间</th>
                    <th>结束时间</th>
                    <th>票价</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr align="center" v-for="(s,i) in shows" :key="i">
                    <td>{{s.showId}}</td>
                    <td>《{{s.filmName}}》</td>
                    <!-- <td width="100px"><img id="imgName" width="100px" height="150px" class="picture-thumb"
                            v-bind:src="'../images/'+s.filmPicture"></td> -->
                    <td>{{s.hallName}}</td>
                    <td>{{s.showDate}}</td>
                    <td>{{s.startTime}}</td>
                    <td>{{s.endTime}}</td>
                    <td>￥{{s.price}}</td>
                    <td>
                        <a @click="update(i,s.showId)"><i class="layui-icon" style="font-size: 18px;"
                                title="修改">&#xe642;</i></a>
                        <a @click="del(i,s.showId)"><i class="layui-icon" style="font-size: 18px;"
                                title="删除">&#xe640;</i></a>
                        <a @click="more(i)"><i class="layui-icon" style="font-size: 18px;"
                                title="更多">&#xe65f;</i></a>
                    </td>
                </tr>

                <tr v-if="shows==null || shows.length==0">
                    <td colspan="11" align="center">无数据</td>
                </tr>

            </tbody>

        </table>

        <div align="center" v-if="isShow==true" style="margin-bottom: 50px;margin-top: 20px;">
			<a><button class="layui-btn" @click="first">首页</button></a>
			<a><button class="layui-btn" @click="up">上一页</button></a>
			<a><button class="layui-btn" @click="down">下一页</button></a>
			<a><button class="layui-btn" @click="end">尾页</button></a>

			<div style="display: inline-block;">
				<input type="text" v-bind:value="currentPage" class="bb" />
				<input type="button" value="GO" class="layui-btn" @click="go"/>
			</div>
		</div>


        <!-- 放映计划添加页面 -->
        <form class="layui-form" id="show-add" style="display: none;margin-top: 30px;">
            <div class="layui-form-item">
                <label class="layui-form-label">放映影片</label>
                <div class="layui-input-block" style="width:600px">
                    <select id="filmName" lay-filter="filmName" lay-search>
                        <option value=""></option>
                        <option v-for="(f,i) in films" v-bind:value="i">{{f.filmName}}</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">放映影厅</label>
                <div class="layui-input-block" style="width:600px">
                    <select id="hallName" lay-filter="hallName" lay-search>
                        <option value=""></option>
                        <option v-for="(h,i) in halls" v-bind:value="i">{{h.hallName}}</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">放映日期</label>
                <div class="layui-input-block">
                    <input type="text" id="showDate" required placeholder="yyyy-MM-dd" lay-verify="date"
                        autocomplete="off" class="layui-input c">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">开场时间</label>
                <div class="layui-input-block">
                    <input type="text" id="startTime" placeholder="HH:mm" lay-verify="date"
                        autocomplete="off" class="layui-input c">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-block">
                    <input type="text" id="endTime" class="layui-input required c">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">票价</label>
                <div class="layui-input-block">
                    <input type="text" id="price" class="layui-input required c">
                </div>
            </div>

            <!-- 隐藏域 -->
            <input type="hidden" id="filmIndex" value="">       <!-- 用于存储当前放映影片的下标 -->            
            <input type="hidden" id="filmLong" value="">        <!-- 用于存储当前放映影片的时长 -->
            <input type="hidden" id="filmId" value="">          <!-- 用于存储当前放映影片的ID -->
            <input type="hidden" id="hallId" value="">          <!-- 用于存储当前放映影厅的ID -->
            <input type="hidden" id="hallIndex" value="">       <!-- 用于存储当前放映影厅的下标 -->

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-filter="demo1" @click="add"><i
                            class="layui-icon">&#xe621;</i>提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary"><i
                            class="layui-icon">&#xe9aa;</i>重置</button>
                </div>
            </div>
        </form>


        <!-- 放映计划修改页面 -->
        <form class="layui-form" id="show-update" style="display: none;margin-top: 30px;">
            <div class="layui-form-item">
                <label class="layui-form-label">放映影片</label>
                <div class="layui-input-block" style="width:600px">
                    <input type="text" v-bind:value="currentShow.filmName" class="layui-input required c" readonly>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">放映影厅</label>
                <div class="layui-input-block" style="width:600px">
                    <input type="text" v-bind:value="currentShow.hallName" class="layui-input required c" readonly>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">放映日期</label>
                <div class="layui-input-block">
                    <input type="text" id="showDate2" v-bind:value="currentShow.showDate" required placeholder="yyyy-MM-dd" lay-verify="date"
                        autocomplete="off" class="layui-input c">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">开场时间</label>
                <div class="layui-input-block">
                    <input type="text" id="startTime2" v-bind:value="currentShow.startTime" placeholder="HH:mm" lay-verify="date"
                        autocomplete="off" class="layui-input c">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-block">
                    <input type="text" id="endTime2" v-bind:value="currentShow.endTime" class="layui-input required c">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">票价</label>
                <div class="layui-input-block">
                    <input type="text" id="price2" v-bind:value="currentShow.price" class="layui-input required c">
                </div>
            </div>

            <!-- 隐藏域 -->
            <!-- <input type="hidden" id="showIndex" value="">       用于存储当前修改放映计划的下标 -->
            <input type="hidden" id="filmLong2" value="">       <!-- 用于存储当前修改放映影片的时长 -->
            <input type="hidden" id="showId2" value="">         <!-- 用于存储当前修改放映计划的ID -->

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-filter="demo1" @click="updateShow"><i
                            class="layui-icon">&#xe621;</i>提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary"><i
                            class="layui-icon">&#xe9aa;</i>重置</button>
                </div>
            </div>
        </form>


    </div>

    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="js/manage-show.js"></script>
    <script>
        // 时间转换
        function toHourMinute(minutes) {
            return { h: Math.floor(minutes / 60), m: (minutes % 60) };
        }


        // 解决下拉列表框不显示
        layui.use('form', function () {
            var form = layui.form;
            form.render();

            // 放映影片下拉列表框监视
            form.on('select(filmName)', function (data) {
                //console.log(data.value); 得到被选中的值

                if(data.value==""){
                    $("#filmIndex").val('');
                    $("#filmLong").val('');
                    $("#filmId").val('');
                    $("#endTime").val('');
                    return;
                }
                $("#filmIndex").val(data.value);
                $("#filmLong").val(show.films[data.value].filmLong);
                $("#filmId").val(show.films[data.value].filmId);

                if ($("#startTime").val() == "") {
                    return;
                }

                // 对开场时间进行字符串截取 ，得到 时 和 分
                let startTimeHour = $("#startTime").val().substring(0, 2);
                let startTimeMinute = $("#startTime").val().substring(3, 5);

                let filmLong = toHourMinute($("#filmLong").val());

                newHours = parseInt(startTimeHour) + filmLong.h;
                newMinute = parseInt(startTimeMinute) + filmLong.m;

                if (newMinute >= 60) {
                    newMinute = newMinute - 60;
                    newHours = newHours + 1;
                }
                if (newMinute<10) {
                    newMinute = "0" + newMinute;
                }

                newEndTime = newHours + ":" + newMinute;

                $("#endTime").val(newEndTime);

                // console.log(newEndTime);


            });

            // 放映影厅下拉列表框监视
            form.on('select(hallName)', function (data) {
                if(data.value==""){
                    $("#hallId").val('');
                    $("#hallIndex").val('');
                    return;
                }
                $("#hallId").val(show.halls[data.value].hallId);
                $("#hallIndex").val(data.value);

            });
        });

        //日期表选择
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

            // 开场时间选择器（添加）
            laydate.render({
                elem: '#startTime',
                type: 'time',
                theme: '#6A0888',
                trigger: 'click',   //解决闪退问题
                format: 'HH:mm',
                min: '09:30:00',
                max: '22:00:00',
                done: function (value, date, endDate) {
                    if ($("#filmLong").val() == "" || $("#startTime").val()=="") {
                        $("#endTime").val('');
                        return;
                    }
                    let filmLong = toHourMinute($("#filmLong").val());

                    newHours = date.hours + filmLong.h;
                    newMinute = date.minutes + filmLong.m;

                    if (newMinute >= 60) {
                        newMinute = newMinute - 60;
                        newHours = newHours + 1;
                    }
                    if (newMinute<10) {
                        newMinute = "0" + newMinute;
                    }
                    

                    newEndTime = newHours + ":" + newMinute;

                    $("#endTime").val(newEndTime);

                }
            });

            // 开场时间选择器（修改）
            laydate.render({
                elem: '#startTime2',
                type: 'time',
                theme: '#6A0888',
                trigger: 'click',   //解决闪退问题
                format: 'HH:mm',
                min: '09:30:00',
                max: '22:00:00',
                done: function (value, date, endDate) {
                    if ($("#startTime2").val()=="") {
                        $("#endTime2").val('');
                        return;
                    }
                    let filmLong = toHourMinute($("#filmLong2").val());

                    newHours = date.hours + filmLong.h;
                    newMinute = date.minutes + filmLong.m;

                    if (newMinute >= 60) {
                        newMinute = newMinute - 60;
                        newHours = newHours + 1;
                    }
                    if (newMinute<10) {
                        newMinute = "0" + newMinute;
                    }
                    

                    newEndTime = newHours + ":" + newMinute;

                    $("#endTime2").val(newEndTime);

                }
            });

            // 放映日期(添加)
            laydate.render({
                elem: '#showDate',
                theme: '#393D49',   // 主题
                trigger: 'click',   //解决闪退问题
                min: 'date'          // 设置最小日期为当前时间
            });

            // 放映日期(修改)
            laydate.render({
                elem: '#showDate2',
                theme: '#393D49',   // 主题
                trigger: 'click',   //解决闪退问题
                min: 'date'          // 设置最小日期为当前时间
            });

            

        });


        // 放映计划添加弹出层
        $('#addShow').on('click', function () {
            layer.open({
                type: 1,
                title: ['添加上映计划', 'font-size:18px;color:orange'],
                anim: 4,   // 动画
                resize: false,  // 是否允许拉伸改变宽高
                area: ['800px', '480px'], // 设置宽，高
                shadeClose: false, //点击遮罩关闭
                scrollbar: false,   // 屏蔽浏览器滚动（false: 则屏蔽）
                content: $("#show-add"),
                cancel:function(){
                    clearAll();
                }
            });
        });


    </script>
</body>
</html>